<script setup>
defineOptions({
  name: "ReInput"
});

import { computed, defineModel } from "vue";
// 根据inpu生成props
const props = defineProps({
  type: {
    type: String,
    default: "text"
  },
  placeholder: {
    type: String,
    default: ""
  },
  disabled: {
    type: Boolean,
    default: false
  },
  maxlength: {
    type: Number,
    default: 100
  },
  minlength: {
    type: Number,
    default: 0
  },
  autocomplete: {
    type: String,
    default: "off"
  },
  inputStyle: {
    type: Object,
    default: () => ({})
  },
  prefixName: {
    type: String,
    default: ""
  },
  suffixName: {},
  prefixIcon: {
    type: String,
    default: ""
  },
  suffixIcon: {
    type: String,
    default: ""
  }
});

const emit = defineEmits();

const modelValue = defineModel();

const handleChange = e => {
  emit("update:modelValue", e.target.value);
  emit("change", e.target.value);
};

const handleFocus = e => {
  emit("focus", e);
};

const handleBlur = e => {
  emit("blur", e);
};

const handleConfirm = () => {
  emit("confirm");
};

const setStyle = computed(() => {
  return {
    ...props.inputStyle
  };
});
</script>

<template>
  <div class="re-input__wrapper">
    <div class="prefix w-fit text-[18px]">
      <!-- 根据 prefixName.length  如果有 prefixName 优先使用 反之则用slot -->
      <div v-if="props.prefixName.length > 0">{{ prefixName }}</div>
      <slot v-else name="prefix"></slot>
    </div>

    <input
      :style="setStyle"
      v-model="modelValue"
      :type="props.type"
      :placeholder="props.placeholder"
      :disabled="props.disabled"
      :maxlength="props.maxlength"
      :minlength="props.minlength"
      :autocomplete="props.autocomplete"
      @input="handleChange"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
    />

    <slot name="suffix">
      <el-button type="primary" size="default" @click="handleConfirm">{{
        $t("layer.wallet.confirm")
      }}</el-button>
    </slot>
  </div>
</template>

<style scoped lang="less">
.re-input__wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  height: 60px;
  background-color: #1a2c38;
  box-sizing: border-box;
}
input {
  flex: 1;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  height: 36px;
  background-color: #1a2c38;
  border-color: transparent;
  outline: none;
  margin: 0 10px;
}

inpur:focus {
  outline: none !important;
  border-color: transparent !important; /* or you can use rgba(0, 0, 0, 0) for more control */
}

@media (max-width: 750px) {
  .prefix {
    flex-basis: 60px !important;
    width: 60px !important;
    font-size: 12px !important;
    div {
      width: 60px;
    }
  }
  input {
    flex-basis: 60% !important;
    width: 60%;
    font-size: 14px !important;
  }
}
</style>
